<template>
    <div class="header">
        <h3>大学生志愿者活动</h3>
    </div>
    <div class="content">
        <div class="prensonal act">
            <div class="right">
                <img src="../assets/prensonalImge.jpg" alt="">
                <span>李华</span>
            </div>
            <div class="left" @click="prensonal">></div>
        </div>
        <div class="navigation act">
            <van-grid>
                <van-grid-item class="list" @click="activityList" icon="list-switch" text="认领活动" />
                <van-grid-item class="list" @click="pointsrank" icon="description-o" text="爱心报表" />
                <van-grid-item class="list" @click="serviceLog" icon="notes" text="服务纪实" />
                <van-grid-item class="list" @click="serviceList" icon="send-gift-o" text="我的服务" />
            </van-grid>
        </div>
        <div class="activityList">
            <div class="activelist">
                <div class="volact">志愿活动</div>
                <div class="more">查看更多></div>
            </div>
            <div class="actives">
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
                <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
            </div>
        </div>
        <van-cell v-for="item in list" :key="item" :title="item" />
        <van-back-top right="15vw" bottom="10vh" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const list = [...Array(50).keys()];

function prensonal(){
    router.push('/prensonal') //个人信息
}
function activityList(){
    router.push('/activtyList') //活动列表
}
function pointsrank(){
    router.push('/pointsRank') //积分排名
}
function serviceLog(){
    router.push('/serviceLog') //服务记录上传
}
function serviceList(){
    router.push('/serviceList') //服务记录列表
}

</script>


<style scoped>
.header{
    width: 100vw;
    height: 150px;

    border: 1px solid;
    background: #3d3636;
    text-align: center;
}
h3{
    color: aliceblue;
    padding-top: 40px;
}
.act{
    width: 370px;
    height: 70px;

    border: 1px solid;
    border-radius: 5px;

    background-color: #fff;
    margin: 20px;
}
.prensonal{ 

    position: absolute;
    top: 90px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right{
    width: 90px;
    height: 50px;   

    display: flex;
    align-items: center;
    padding: 10px;
}
.left{
    margin-right: 10px;
}
a{
    padding: 10px;
    text-decoration: none;
    color: #3d3636;
}
img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
span{
    display: block;
   padding-left: 8px;
}
.navigation{

    position: absolute;
    top: 180px;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.activityList{
    width: 100vw;
    height: 600px;

    border: 1px solid;
    background-color: #fff;

    position: absolute;
    bottom: 43px;
}

.list{
    width: 90px;
    height: 70px;
    /* border: 1px solid;
    background-color: #fac1c1; */
}

.custom-tag {
  position: absolute; /* 使用绝对定位 */
  bottom: 0; /* 底部对齐 */
  left: -88px; /* 左对齐 */
  transform: translateX(-50%); /* 水平居中对齐 */
  margin-bottom: 10px; /* 调整与底部的间距 */
}
.custom-tag2{
    width: 115px;
}

.activelist{
    width: 100vw;
    height: 40px;
    border: 1px solid;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.volact,.more{
    width: 77px;
    height: 24px;
    /* border: 1px solid; */
    margin: 10px;
}

.active{
    width: 100vw;
    height: 100px;
    border: 1px solid;
}

</style>